<template>
  <div class="pSlide">
    <a-layout v-if="showIndex">
      <a-layout-sider :width="225">
        <!-- title -->
        <div class="pSlide-title" @mouseenter="addIcon = true" @mouseleave="addIcon = false">新闻资讯</div>
        <a-menu class="groupleft">
          <a-menu-item v-for="item in groupList" :key="item.id" style="border-bottom: 1px solid #e8e8e8" @click="getNewlistByType(item)">
            <a-row type="flex" align="middle" justify="space-between">
              <a-col class="groupname">{{ item.name }}</a-col>
              <a-col>
                <a-icon v-if="act == item.id" type="setting" @click.stop="setting(item)" />
              </a-col>
            </a-row>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-row type="flex" class="lay-head">
          <a-button type="primary" icon="plus" :disabled="!haveType" @click="createNew">新建文档</a-button>
          <a-input-search placeholder="搜索文档" style="width: 200px" allowClear @search="onSearch" />
        </a-row>
        <!-- 新闻类型列表 -->
        <a-table
          :columns="noticeColumns"
          :data-source="newslist"
          row-key="id"
          class="hidetitle"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          :pagination="pagination"
          :loading="tableLoading"
          @change="handleTableChange"
        >
          <span slot="title" slot-scope="text" style="display: flex">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ text != null ? text : "--" }}</span>
              </template>
              <div class="titleline">{{ text != null ? text : "--" }}</div>
            </a-tooltip>
          </span>
          <span slot="status" slot-scope="text">
            <span :class="text === 0 ? 'tc-theme' : text === 1 ? 'tc-theme' : 'colorC0C0C0'">• </span>
            {{ text === 0 ? "置顶" : "未置顶" }}
          </span>
          <span slot="action" slot-scope="text, record">
            <span style="display: flex; align-items: center">
              <a type="link" @click="updateNew(record)"> 编辑 </a>
              <a-divider type="vertical" />
              <a class="primary_color" style="cursor: pointer" type="link" @click="goDetail(record)"> 详情 </a>
              <a-divider type="vertical" />
              <a type="link" @click="deleteNew(record)"> 删除 </a>
            </span>
          </span>
        </a-table>
      </a-layout>
    </a-layout>
    <!-- 分组table,编辑分组信息 -->
    <a-layout v-if="!showIndex">
      <a-layout>
        <a-row type="flex" style="justify-content: space-between">
          <a-icon type="left" style="font-size: 20px" @click="showIndex = true" />
          <h3>编辑分组</h3>
          <a-button type="link" icon="plus" @click="createGroup"> 添加分组</a-button>
        </a-row>
        <a-layout-content class="groupbox">
          <a-table
            :data-source="groupList"
            :row-key="(data) => data.id"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange
            }"
          >
            <a-table-column title="分组名称" align="center">
              <template slot-scope="text">
                <span>{{ text.name }}</span>
              </template>
            </a-table-column>
            <a-table-column title="分组内合同类型数" align="center">
              <template slot-scope="text">
                {{ text.categoryCount }}
              </template>
            </a-table-column>
            <a-table-column title="操作" align="center">
              <template slot-scope="text">
                <a-button type="link" @click="updateGroup(text)">编辑</a-button>
                <a-divider type="vertical" />
                <a-button type="link" :disabled="text.categoryCount > 0" @click="deleteGroup(text)">删除</a-button>
              </template>
            </a-table-column>
          </a-table>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <!-- 添加分组 -->
    <a-modal :title="groupTitle" :visible="addGroupVisible" :confirm-loading="confirmLoading" @ok="confirmAddGroup" @cancel="handleCancel">
      <div>
        <a-form :form="groupForm" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
          <a-form-item :colon="true" label="分组名称">
            <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入' }] }]" />
          </a-form-item>
          <a-form-item :colon="true" label="官网信息展示分组主键">
            <a-input v-decorator="['newsGroupId', { rules: [{ required: true, message: '请输入' }] }]" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <!-- 新增合同类型 -->
    <a-modal :title="groupTitle" :visible="addTypeVisible" :confirm-loading="confirmLoading" @ok="confirmAddType" @cancel="handleCancel">
      <div>
        <a-form :form="typeForm" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }" :colon="true">
          <a-form-item label="合同模板名称">
            <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入' }] }]" />
          </a-form-item>
          <a-form-item label="选择分组">
            <a-select v-decorator="['groupId', { rules: [{ required: true, message: '请选择' }] }]">
              <a-select-option v-for="(group, index) in groupList" :key="index" :value="group.id">
                {{ group.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="名称描述">
            <a-textarea
              v-decorator="['description', { rules: [{ required: false, message: '请输入' }] }]"
              placeholder="请输入名称描述"
              :rows="4"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <!-- 删除提示 -->
    <a-modal
      title="提示"
      :visible="batchDeleteGroupVisible"
      :confirm-loading="confirmLoading"
      @ok="confirmDeleteGroup"
      @cancel="handleCancel"
    >
      <p style="font-weight: 500">确定删除分组 {{ theCurrentGroup.name }}吗？</p>
    </a-modal>
    <a-modal title="提示" :visible="batchDeleteNewVisible" :confirm-loading="confirmLoading" @ok="confirmDeleteNew" @cancel="handleCancel">
      <p style="font-weight: 500">确定删除 {{ theCurrentGroup.name }}吗？</p>
    </a-modal>
  </div>
</template>

<script>
import { formatDateAll } from "@/utils/index";
import { getNewsGroups, selectNewsByType, addNewsTypes, updateNewsTypes, batchDelNews, batchDelNewsTypes } from "@/api/company/news";
import { addCategories, updateCategories } from "@/api/company/contract";
const noticeColumns = [
  {
    title: "标题",
    dataIndex: "name",
    width: 260,
    onCell: () => {
      return {
        style: {
          maxWidth: 340,
          overflow: "hidden",
          whiteSpace: "nowrap",
          textOverflow: "ellipsis",
          cursor: "pointer"
        }
      };
    },
    scopedSlots: { customRender: "title" }
  },
  {
    title: "发布时间",
    dataIndex: "pushDate",
    width: 200,
    customRender: (text, record, index) => {
      return formatDateAll(text);
    }
  },
  {
    title: "操作",
    dataIndex: "action",
    width: 180,
    scopedSlots: { customRender: "action" }
  }
];
export default {
  data() {
    return {
      noticeColumns,
      newslist: [],
      showIndex: true,
      haveType: false,
      // 添加图标
      addIcon: false,
      // 设置图标
      act: false,
      companyId: this.$store.state.hr.companyId,
      id: null,
      groupType: null,
      groupCode: null,
      groupTitle: "添加",
      groupList: [],
      data: [],
      batchDeleteNewVisible: false,
      batchDeleteGroupVisible: false,
      addGroupVisible: false,
      addTypeVisible: false,
      confirmLoading: false,
      groupForm: this.$form.createForm(this),
      typeForm: this.$form.createForm(this),
      selectedRowKeys: [],
      theCurrentGroup: "",
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true
      },
      tableLoading: false
    };
  },

  mounted() {
    this.getNewsTypes();
  },
  methods: {
    /* 搜索 */
    onSearch(e) {
      if (e) {
        selectNewsByType({
          name: e,
          groupType: this.groupType,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }).then((res) => {
          this.newslist = res.data.entities;
          this.pagination.total = res.data && res.data.entityCount;
        });
      } else {
        selectNewsByType({
          groupType: this.groupType,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }).then((res) => {
          this.newslist = res.data.entities;
          this.pagination.total = res.data && res.data.entityCount;
        });
      }
    },
    // 获取分组列表
    getNewsTypes() {
      this.tableLoading = true;
      getNewsGroups().then((res) => {
        this.groupList = res.data;
        selectNewsByType({
          groupCode: this.groupCode,
          groupType: this.groupType,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }).then((res) => {
          this.tableLoading = false;
          this.newslist = res.data.entities;
          this.pagination.total = res.data && res.data.entityCount;
        });
      });
    },
    // 获取分组下的合同类型列表
    getNewlistByType(item) {
      this.groupType = item.type;
      this.groupCode = item.code;
      this.haveType = true;
      selectNewsByType({
        groupCode: item.code,
        groupType: item.type,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        this.newslist = res.data.entities;
        this.pagination.total = res.data && res.data.entityCount;
      });
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      selectNewsByType({
        groupCode: this.groupCode,
        groupType: this.groupType,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        this.newslist = res.data.entities;
        this.pagination.total = res.data && res.data.entityCount;
      });
    },
    // 新增文档
    createNew() {
      this.$router.push({
        path: `news/createNew`,
        query: { groupCode: this.groupCode }
      });
    },
    updateNew(record) {
      this.$router.push({
        path: `news/createNew`,
        query: { id: record.id, groupType: this.groupType, state: "edit" }
      });
    },
    goDetail(record) {
      this.$router.push({
        path: `news/detail`,
        query: { id: record.id }
      });
    },
    // 新增合同分组
    createGroup() {
      this.groupTitle = "添加";
      this.addGroupVisible = true;
      this.groupForm.resetFields();
    },
    // 编辑合同分组
    updateGroup(item) {
      this.theCurrentGroup = item;
      this.groupTitle = "编辑";
      this.addGroupVisible = true;
      setTimeout(() => {
        this.groupForm.setFieldsValue({
          name: item.name
        });
      }, 0);
    },
    // 删除合同分组
    deleteGroup(item) {
      this.batchDeleteGroupVisible = true;
      this.theCurrentGroup = item;
    },
    deleteNew(item) {
      this.batchDeleteNewVisible = true;
      this.theCurrentGroup = item;
    },
    // 确定增加合同分组
    confirmAddGroup(e) {
      var that = this;
      e.preventDefault();
      this.groupForm.validateFields((err, values) => {
        values.sort = "1";
        values.subjectId = this.companyId;
        if (!err) {
          if (that.groupTitle === "添加") {
            addNewsTypes(values).then((res) => {
              that.$message.success("添加成功");
              this.addGroupVisible = false;
              that.getNewsTypes();
            });
          } else {
            updateNewsTypes({ ...values, id: that.theCurrentGroup.id }).then((res) => {
              that.$message.success("编辑成功");
              this.addGroupVisible = false;
              that.getNewsTypes();
            });
          }
        }
      });
    },
    confirmDeleteNew() {
      var newsTypeIds = [];
      newsTypeIds.push(this.theCurrentGroup.id);
      batchDelNews(newsTypeIds).then((res) => {
        this.$message.success("删除成功");
        this.batchDeleteNewVisible = false;
        selectNewsByType({
          groupCode: this.groupCode,
          groupType: this.groupType,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }).then((res) => {
          this.newslist = res.data.entities;
          this.pagination.total = res.data && res.data.entityCount;
        });
      });
    },
    // 确定删除新闻类型分组
    confirmDeleteGroup() {
      var contractGroupIds = [];
      contractGroupIds.push(this.theCurrentGroup.id);
      batchDelNews(contractGroupIds).then((res) => {
        this.$message.success("删除成功");
        this.batchDeleteGroupVisible = false;
        this.getNewsTypes();
      });
    },
    // // 确定增加合同分类
    confirmAddType(e) {
      var that = this;
      e.preventDefault();
      this.typeForm.validateFields((err, values) => {
        values.sort = "1";
        values.subjectId = this.companyId;
        if (!err) {
          if (that.groupTitle === "添加") {
            addCategories(values).then((res) => {
              that.$message.success("添加成功");
              this.addTypeVisible = false;
              that.getNewsTypes();
              this.$router.push({
                name: "setting",
                query: {
                  id: res.data.id
                }
              });
            });
          } else {
            updateCategories({ ...values, id: that.theCurrentGroup.id, subjectId: this.$store.state.hr.companyId }).then((res) => {
              that.$message.success("编辑成功");
              this.addTypeVisible = false;
              that.getNewsTypes();
            });
          }
        }
      });
    },
    handleCancel() {
      this.addGroupVisible = false;
      this.batchDeleteVisible = false;
      this.addTypeVisible = false;
      this.batchDeleteNewVisible = false;
    },
    // 多选合同列表
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    }
  }
};
</script>
<style lang="scss">
.pSlide {
  padding: 24px;
}
.lay-head {
  width: 100%;
  padding: 0 0 20px 20px;
  display: flex;
  justify-content: space-between;
}
.pSlide-title {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  padding-left: 14px;
  cursor: pointer;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: none !important;
}
.ant-layout-sider-children {
  border-right: 1px solid #e8e8e8;
}
.title1 {
  font-size: 14px;
  color: rgba(37, 37, 37, 1);
  line-height: 20px;
}

.subTitle {
  font-size: 12px;
  color: rgba(89, 89, 89, 1);
  line-height: 18px;
}
.groupname {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
}
.listbox {
  max-height: 76vh;
  overflow: auto;
  margin-left: 24px;
  .ant-list-item {
    padding-left: 35px;
    padding-right: 24px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    background: rgba(250, 250, 250, 1);
    margin-top: 24px;
    border: none;
    .ant-list-item-meta-description {
      width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p {
      margin: 0;
    }
  }
  .listItem {
    width: 50%;
    border-right: 1px solid #e8e8e8;
    .listbtm {
      button {
        padding: 0;
      }
    }
  }
  .setline {
    width: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    .ant-select-selection__placeholder,
    .ant-select-search__field__placeholder {
      color: #000;
    }
  }
}
.groupbox {
  max-height: 580px;
  overflow: auto;
}
.groupleft {
  width: 90%;
  max-height: 580px;
  overflow: auto;
}
.hidetitle {
  margin-left: 20px;
  .ant-table-title {
    display: none;
  }
}
</style>
